<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript" th:src="@{/asserts/scripts/jquery-3.7.0.js}"></script>
</head>
<body>
<div>
    <div>
        <h2> 图书列表</h2>
        <p>欢迎 : <span th:text="${session.userInfo.username}" th:if="${!#strings.isEmpty(session.userInfo)}"></span></p>
    </div>
    <div>
        <form th:action="@{/book/list}" method="post">
            名称 :<input type="text" name="bname" th:value="${bname}">
            类型 :
            <select name="cid">
                <option value="-1">==请选择==</option>
                <option th:each="c : ${clist}" th:value="${c.id}" th:text="${c.categoryName}" th:selected="${c.id == cid}"></option>
            </select>

            <input type="submit" value="搜 搜" />
        </form>
    </div>
    <a th:href="@{/book/addView}">添加图书</a>   <button onclick="delBatch()">批量删除</button>
    <div>
        <table border="1" width="1000px">
            <tr>
                <th>
                    <input type="checkbox" />
                </th>
                <th>ID</th>
                <th>名称</th>
                <th>类型</th>
                <th>价格</th>
                <th>库存</th>
                <th>上架时间</th>
                <th>作者</th>

                <th>操作</th>
            </tr>

            <tr th:each="b:${pageInfo.list}">
                <td>
                    <input type="checkbox" name="id" th:value="${b.id}" />
                </td>
                <td th:text="${b.id}">ID</td>
                <td th:text="${b.bookName}">名称</td>
                <td th:text="${b.categoryName}">类型</td>
                <td th:text="${b.bookPrice}">价格</td>
                <td th:text="${b.bookStore}">库存</td>
                <td th:text="${#dates.format(b.bookOnsaleDate,'yyyy-MM-dd HH:mm:ss')}">上架时间</td>
                <td th:text="${b.bookAuthor}">作者</td>

                <th>
                    <a th:href="@{/book/modifyView(id=${b.id})}">编辑</a>||
                    <a href="javascript:void(0)"  th:onclick="|del(${b.id})|">删除</a>
                </th>
            </tr>
        </table>
    </div>

    <div>
        当前<span th:text="${pageInfo.pageNum}"></span>/<span th:text="${pageInfo.pages}"></span>页 &nbsp;&nbsp;
        总计 :<span th:text="${pageInfo.total}"></span> 条 &nbsp;&nbsp;

        <a th:href="@{/book/list(bname=${bname},cid=${cid},now=1,size=${pageInfo.pageSize})}">首页</a>
        <a th:href="@{/book/list(bname=${bname},cid=${cid},now=${pageInfo.prePage},size=${pageInfo.pageSize})}">上一页</a>
        <a th:href="@{/book/list(bname=${bname},cid=${cid},now=${pageInfo.nextPage},size=${pageInfo.pageSize})}">下一页</a>
        <a th:href="@{/book/list(bname=${bname},cid=${cid},now=${pageInfo.pages},size=${pageInfo.pageSize})}">尾页</a>

    </div>

    <script th:inline="javascript">
        function  del(id){
            let baseUrl = [[@{/}]]   ;
            let url = baseUrl + "book/del?id="+id ;

            if (confirm('确认删除吗?')) {
                $.get(url,function(data){
                    if (data == 'noLogin') {
                        alert("请先登录!");
                        location.href = baseUrl + "login.html" ;
                    }else if (data > 0) {
                        alert("删除成功!");
                        location.reload() ; //刷新本页m
                    }else  {
                        alert("删除失败!");
                    }
                });
            }
        }

        function delBatch(){
            let cs = $("input[name=id]:checked");
            if (cs.length < 1) {
                alert("请至少选中一条数据!");
                return ;
            }else {
                let arr = [] ;
                cs.each(function () {
                    arr.push(this.value);
                });
                let params = {"ids":arr} ;
                let baseUrl = [[@{/}]]   ;
                let url = baseUrl + "book/delBatch" ;
                $.post(url,params,function (data){
                    if (data > 0) {
                        alert("删除成功!");
                        location.reload() ; //刷新本页m
                    }else {
                        alert("删除失败!");
                    }
                })
            }
        }
    </script>

</div>
</body>
</html>